import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;


class P extends React.Component {
  render() {
    const { dispatch, items1 } = this.props;
    const data = [
      {
        icon: <Badge text={items1[3].length || null}><img alt="" src={require('../assets/c8.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升1阶段</div><div className={styles.gridDescription}>适合0-6个月的宝宝</div></div>,
        title:'升1阶段',
        type: 3,
        href: '/p1',
      },
      {
        icon: <Badge text={items1[0].length || null}><img alt="" src={require('../assets/c9.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升2阶段</div><div className={styles.gridDescription}>适合6-12个月的宝宝</div></div>,
        title:'升2阶段',
        type: 0,
        href: '/p1',
      },
      {
        icon: <Badge text={items1[1].length || null}><img alt="" src={require('../assets/c10.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升3阶段</div><div className={styles.gridDescription}>适合12-36个月的宝宝</div></div>,
        title:'升3阶段',
        type: 1,
        href: '/p1',
      },
      {
        icon: <Badge text={items1[2].length || null}><img alt="" src={require('../assets/c11.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升4阶段</div><div className={styles.gridDescription}>适合36个月以上的宝宝</div></div>,
        title:'升4阶段',
        type: 2,
        href: '/p1',
      },
    ];
    return (
      <Container title={this.props.location.query.title}>
       <div className="am-list-header" >

         <MyIcon
           type="trips" color="#ff2828" size="xxs"
           style={{ position: 'relative', top: 2, marginRight:8 }}
         />

         <span>总计： <span style={{color:"red"}}>{items1.total} 人</span></span></div>
        <div className="am-list-body">
          <Grid
            data={data} columnNum={2} hasLine
            /* renderItem={dataItem => (
             <Button className={styles.button}>
             {dataItem.name}
             <small>{dataItem.num.length}人</small>
             </Button>
             )}*/
            onClick={(item, index) => {
              dispatch(routerRedux.push({
                pathname: item.href,
                query: {
                  taskType: 6,
                  subType: item.type,
                  title: item.title,
                },
              }));
            }}
          />
        </div>
      </Container>
    );
  }
}
export default connect((state, props) => {
  return { items1: state.task.sub[6] };
})(P);
